<template>
  <div>
    <!-- =============================================主要表格区 -->
    <div class="main_table_area">
      <!-- 操作 -->
      <div class="op_btns">
        <el-tooltip content="如果批量删除的导航中有导航组，并且已为其分配了导航项，则拒绝批量删除" placement="right-end">
          <el-button type="danger" @click="batchDeleteByIds" class="el-icon-delete" plain size="small">批量删除导航</el-button>
        </el-tooltip>
        <el-button type="info" @click="batchDisableByIds" class="el-icon-turn-off" plain size="small">批量禁用导航</el-button>
        <el-button type="primary" @click="batchEnableByIds" class="el-icon-open" plain size="small">批量启用导航</el-button>
        <el-button type="primary" @click="showAddItemDrawer" class="el-icon-plus" plain size="small">新增导航</el-button>
      </div>
      <div class="search_area">
        <!-- 导航类型选项 -->
        <div class="search_item">
          <el-select v-model="mainTable.search.type" placeholder="导航类型" @change="pagingGettableData" size="small">
            <el-option label="所有导航" :value="null"></el-option>
            <el-option :label="t.label" :value="t.value" v-for="t in select.navGroups" :key="t.value"></el-option>
          </el-select>
          <el-button class="el-icon-refresh" size="small" @click="refreshNavGroups"></el-button>
        </div>
        <!-- 导航状态选项 -->
        <div class="search_item">
          <el-select v-model="mainTable.search.enabled" @change="pagingGettableData" placeholder="导航状态" size="small">
            <el-option label="所有状态" :value="null"></el-option>
            <el-option :label="t.label" :value="t.value" v-for="t in select.statuses" :key="t.value"></el-option>
          </el-select>
          <el-button class="el-icon-refresh" size="small" @click="refreshStatuses"></el-button>
        </div>
        <div class="search_item">
          <el-input v-model="mainTable.search.title" placeholder="导航名称" clearable size="small"></el-input>
          <el-input v-model="mainTable.search.route" placeholder="导航路由" clearable size="small"></el-input>
          <el-button type="primary" @click="toSearch" class="el-icon-search" plain size="small">刷新表格</el-button>
        </div>
      </div>

      <!-- 表格 -->
      <el-table :data="mainTable.data" border highlight-current-row size="small"
        @selection-change="selectionChangeHandle">
        <template slot="empty">
          <el-empty description="什么导航都没有"></el-empty>
        </template>
        <!-- 复选列 -->
        <el-table-column type="selection" fixed></el-table-column>
        <!-- 索引列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <!-- 展开列 -->
        <el-table-column type="expand" label="详情">
          <template slot-scope="{row}">
            <el-descriptions :title="row.title" size="small" border :column="1">
              <el-descriptions-item :label="col.label" v-for="(col, index) in mainTable.expandColumns" :key="index">
                {{ row[col.prop] }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <!-- 动态列 -->
        <el-table-column show-overflow-tooltip :min-width="col.minWidth" :label="col.label" :prop="col.prop"
          v-for="(col, index) in mainTable.columns" :key="index">
        </el-table-column>
        <!-- 特殊外理列 -->
        <el-table-column label="类型" min-width="60px">
          <template slot-scope="{row}">
            {{ row.type === 0 ? '导航组' : '导航项' }}
          </template>
        </el-table-column>
        <el-table-column label="字体图标" min-width="100px">
          <template slot-scope="{row}">
            <span :class="row.iconClass">{{ row.iconClass }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="30px">
          <template slot-scope="{row}">
            <el-tag type="success" v-if="row.enabled === 1">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="200px">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="showEditItemDrawer(row)" class="el-icon-edit">编辑</el-button>
            <el-tooltip :content="`为导航组 ${row.title} 分配导航项`" placement="left-start">
              <el-button v-if="row.type === 0" type="success" size="mini"
                @click="showAllocateItemDrawer(row)">分配导航项</el-button>
            </el-tooltip>
            <el-tooltip :content="`为导航项 ${row.title} 配置操作`" placement="left-start">
              <el-button v-if="row.type === 1" type="primary" size="mini"
                @click="showConfigOprationDrawer(row)">配置操作</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 主表分页 -->
      <div style="padding:10px; display: flex; justify-content:space-around; ">
        <el-pagination hide-on-single-page layout="total, sizes, prev, pager, next, jumper" next-text="下一页"
          prev-text="上一页" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="mainTable.page.currentPage" :page-size="mainTable.page.pageSize" :total="mainTable.page.total">
        </el-pagination>
      </div>
    </div>
    <!-- =============================================新增导航 -->
    <div>
      <el-drawer :visible="addItemDrawer.visible" size="50%" direction="rtl" :before-close="addItemDrawerClose"
        title="新增导航">
        <div class="add_nav_area">
          <div id="add_form">
            <el-form :model="addItemDrawer.data" ref="addItemFormRef" label-width="100px" size="small">
              <el-form-item label="导航路由" prop="route">
                <el-input placeholder="路由配置中的path" v-model="addItemDrawer.data.route" clearable></el-input>
              </el-form-item>
              <el-form-item label="导航名称" prop="title">
                <el-input placeholder="请输入名称" v-model="addItemDrawer.data.title" clearable></el-input>
              </el-form-item>
              <el-form-item label="导航标签" prop="label" required>
                <el-input placeholder="请输入标签(字母组成)" v-model="addItemDrawer.data.label" clearable></el-input>
              </el-form-item>
              <el-form-item label="导航描述" prop="description">
                <el-input type="textarea" placeholder="请输入描述" v-model="addItemDrawer.data.description"></el-input>
              </el-form-item>
              <el-form-item label="导航类型" prop="type">
                <el-radio-group v-model="addItemDrawer.data.type">
                  <el-radio-button :label="nt.value" v-for="(nt, index) in select.navGroups" :key="index">
                    {{ nt.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="导航状态" prop="enabled">
                <el-radio-group v-model="addItemDrawer.data.enabled">
                  <el-radio-button :label="s.value" v-for="s in select.statuses" :key="s.value">
                    {{ s.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="导航图标" prop="iconId">
                <el-select v-model="addItemDrawer.data.iconId" placeholder="选择导航图标" clearable filterable>
                  <el-option :value="i.id" :label="i.iconClass" v-for="i in select.iconSelect" :key="i.id">
                    <span :class="i.iconClass">{{ i.iconClass }}</span>
                  </el-option>
                </el-select>
                <el-button @click="refreshIconSelect" class="el-icon-refresh"></el-button>
              </el-form-item>
              <el-form-item>
                <el-button @click="hideAddItemDrawer">取消</el-button>
                <el-button @click="resetFieldsOfAddItemForm">重置</el-button>
                <el-button type="primary" @click="addItem">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- =============================================编辑导航 -->
    <div>
      <el-drawer :visible="editItemDrawer.visible" size="50%" direction="rtl" :before-close="editItemDrawerClose"
        title="编辑导航">
        <div class="edit_nav_area">
          <div id="edit_form">
            <el-form :model="editItemDrawer.data" ref="editUserFormRef" label-width="100px" size="small">
              <el-form-item label="导航路由" prop="route">
                <el-input placeholder="请输入路由" v-model="editItemDrawer.data.route" clearable></el-input>
              </el-form-item>
              <el-form-item label="导航名称" prop="title">
                <el-input placeholder="请输入名称" v-model="editItemDrawer.data.title" clearable></el-input>
              </el-form-item>
              <el-form-item label="导航标签" prop="label" required>
                <el-input placeholder="请输入标签(字母组成)" v-model="editItemDrawer.data.label" clearable></el-input>
              </el-form-item>
              <el-form-item label="导航描述" prop="description">
                <el-input type="textarea" placeholder="请输入描述" v-model="editItemDrawer.data.description"></el-input>
              </el-form-item>
              <el-form-item label="导航类型" prop="type">
                <el-radio-group v-model="editItemDrawer.data.type">
                  <el-radio-button :label="nt.value" v-for="(nt, index) in select.navGroups" :key="index">
                    {{ nt.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="导航状态" prop="enabled">
                <el-radio-group v-model="editItemDrawer.data.enabled">
                  <el-radio-button :label="s.value" v-for="s in select.statuses" :key="s.value">
                    {{ s.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="导航图标" prop="iconId">
                <el-select v-model="editItemDrawer.data.iconId" placeholder="请选择导航图标" clearable filterable>
                  <el-option :value="i.id" :label="i.iconClass" v-for="i in select.iconSelect" :key="i.id">
                    <span :class="i.iconClass">{{ i.iconClass }}</span>
                  </el-option>
                </el-select>
                <el-button @click="refreshIconSelect" class="el-icon-refresh"></el-button>
              </el-form-item>
              <el-form-item>
                <el-button @click="hideEditItemDrawer">取消</el-button>
                <el-button type="primary" @click="editItem">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- =============================================导航组分配导航项 -->
    <div class="allocate_item_area">
      <el-drawer :visible="allocateItemDrawer.visible" :title="`正在给导航组【 ${allocateItemDrawer.navGroup.title} 】配置导航项`"
        size="100%" direction="btt" :before-close="beforeAllocateItemDrawerClose">
        <!-- ------------------------------------已分配部分 -->
        <div id="allocated_area">
          <h4>已分配的导航项</h4>
          <!-- 操作 -->
          <div>
            <el-button @click="selectAllocatedItemsByParentId" plain size="mini"
              class="el-icon-refresh">刷新已分配数据</el-button>
            <el-button type="danger" @click="batchRemoveItems" plain size="mini"
              class="el-icon-delete">批量移除选中导航项</el-button>
            <el-button type="primary" @click="batchEnableItems" plain size="mini"
              class="el-icon-open">批量启用选中导航项</el-button>
            <el-button type="info" @click="batchDisableItems" plain size="mini"
              class="el-icon-turn-off">批量禁用选中导航项</el-button>
            <a class="anchor_point el-icon-caret-bottom" href="#un_allocated_area">浏览可分配导航项</a>
          </div>
          <!-- 表格 -->
          <el-table :data="allocateItemDrawer.allocated.data" size="small"
            @selection-change="allocatedSelectionChangeHandle">
            <template slot="empty">
              <el-empty description="该导航组还未分配任何导航项"></el-empty>
            </template>
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <!-- 动态列 -->
            <el-table-column :label="col.label" :prop="col.prop" v-for="col in allocateItemDrawer.allocated.columns"
              :key="col.id">
            </el-table-column>
            <!-- 特殊外理列 -->
            <el-table-column label="类型" min-width="60px">
              <template slot-scope="{row}">
                <span v-if="row.type === 1">导航项</span>
                <span v-if="row.type === 0">导航组</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="40px">
              <template slot-scope="{row}">
                <el-tag type="success" v-if="row.enabled === 1">启用</el-tag>
                <el-tag type="info" v-if="row.enabled === 0">禁用</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div style="padding:10px; display: flex; justify-content:space-around; ">
            <el-pagination layout="total, sizes, prev, pager, next, jumper" next-text="下一页" prev-text="上一页"
              hide-on-single-page :current-page="allocateItemDrawer.allocated.page.currentPage"
              :page-size="allocateItemDrawer.allocated.page.pageSize" :total="allocateItemDrawer.allocated.total"
              @size-change="handleAllocatedItemSizeChange" @current-change="handleAllocatedItemCurrentChange">
            </el-pagination>
          </div>
        </div>
        <!-- ------------------------------------待分配部分 -->
        <div id="un_allocated_area">
          <h4>可分配的导航项</h4>
          <!-- 操作 -->
          <div>
            <el-button @click="selectUnAllocatedItems" plain size="mini" class="el-icon-refresh">刷新待分配数据</el-button>
            <el-button type="primary" @click="batchAllocateItems" plain size="mini"
              class="el-icon-open">批量分配选中导航项</el-button>
            <a class="anchor_point el-icon-caret-top" href="#allocated_area">浏览已分配导航项</a>
          </div>
          <!-- 表格 -->
          <el-table :data="allocateItemDrawer.unAllocated.data" size="small"
            @selection-change="unAllocatedSelectionChangeHandle">
            <template slot="empty">
              <el-empty description="没有更多可分配的导航项了"></el-empty>
            </template>
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <!-- 动态列 -->
            <el-table-column :label="col.label" :prop="col.prop" v-for="col in allocateItemDrawer.unAllocated.columns"
              :key="col.id">
            </el-table-column>
            <!-- 特殊外理列 -->
            <el-table-column label="类型" min-width="60px">
              <template slot-scope="{row}">
                <span v-if="row.type === 1">导航项</span>
                <span v-if="row.type === 0">导航组</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="40px">
              <template slot-scope="{row}">
                <el-tag type="success" v-if="row.enabled === 1">启用</el-tag>
                <el-tag type="info" v-if="row.enabled === 0">禁用</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div style="padding:10px; display: flex; justify-content:space-around; ">
            <el-pagination layout="total, sizes, prev, pager, next, jumper" next-text="下一页" prev-text="上一页"
              hide-on-single-page :current-page="allocateItemDrawer.unAllocated.page.currentPage"
              :page-size="allocateItemDrawer.unAllocated.page.pageSize" :total="allocateItemDrawer.unAllocated.total"
              @size-change="handleUnAllocatedItemSizeChange" @current-change="handleUnAllocatedItemCurrentChange">
            </el-pagination>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- =============================================导航项配置操作 -->
    <div>
      <el-drawer append-to-body :visible="configOpration.visible" @close="configOprationClose" size="100%"
        :title="`正在给导航项 【${configOpration.navItem.title}】 配置操作`" direction="btt">
        <!-- 操作配置 -->
        <div>
          <!-- 操作 -->
          <div>
            <el-button type="primary" plain size="small" @click="selectOprationsOfNavItem"
              class="el-icon-refresh">刷新表格</el-button>
            <el-button type="primary" plain size="small" @click="showAddOperation" class="el-icon-plus">新增操作</el-button>
            <el-button type="danger" plain size="small" @click="batchDeleteOprations"
              class="el-icon-delete">批量删除操作</el-button>
            <el-button type="primary" plain size="small" @click="batchEnableOprations"
              class="el-icon-open">批量启用操作</el-button>
            <el-button type="info" plain size="small" @click="batchDisableOprations"
              class="el-icon-turn-off">批量禁用操作</el-button>
          </div>
          <el-table :data="configOpration.data" @selection-change="configOprationSelectChangeHandle" size="small"
            highlight-current-row>
            <template slot="empty">
              <el-empty description="导航项还没有配置任何操作"></el-empty>
            </template>
            <!-- 复选列 -->
            <el-table-column type="selection" min-width="30px"></el-table-column>
            <!-- 序号列 -->
            <el-table-column type="index" label="序号" min-width="30px"></el-table-column>
            <!-- 动态列 -->
            <el-table-column :min-width="col.minWidth" :label="col.label" :prop="col.prop"
              v-for="(col, index) in configOpration.columns" :key="index">
            </el-table-column>
            <!-- 特殊处理列 -->
            <el-table-column label="字体图标" min-width="120px">
              <template slot-scope="{row}">
                <span :class="row.iconClass">{{ row.iconClass }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="40px">
              <template slot-scope="{row}">
                <el-tag type="success" v-if="row.enabled === 1">启用</el-tag>
                <el-tag type="info" v-if="row.enabled === 0">禁用</el-tag>
              </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作" width="200px">
              <template slot-scope="{row}">
                <el-button type="primary" plain size="small" @click="showEditOperation(row)">编辑</el-button>
                <el-tooltip>
                  <span slot="content">
                    给操作【{{ row.title }}】关联API，若此操作关联的API数量小于1，则对于普通用户，即使此操作本身状态是启用的，也会变得不可用
                  </span>
                  <el-button type="primary" plain size="small" @click="showAllocateAPIDialog(row)">关联API</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 新增操作对话框 -->
        <div>
          <el-dialog append-to-body title="新增操作" :visible="configOpration.add.visible" width="30%"
            :before-close="hideAddOperation">
            <el-form :model="configOpration.add.data" label-width="100px" ref="add_operation_form" size="small">
              <el-form-item label="操作名称" prop="title">
                <el-input v-model="configOpration.add.data.title" placeholder="输入操作名称"></el-input>
              </el-form-item>
              <el-form-item label="操作标识" prop="label" required>
                <el-input v-model="configOpration.add.data.label" placeholder="输入操作标识(字母组成)"></el-input>
              </el-form-item>
              <el-form-item label="操作描述" prop="description">
                <el-input type="textarea" v-model="configOpration.add.data.description" placeholder="输入操作描述"></el-input>
              </el-form-item>
              <el-form-item label="操作图标" prop="iconId">
                <el-select v-model="configOpration.add.data.iconId" placeholder="请选择操作图标" clearable filterable>
                  <el-option :value="i.id" :label="i.iconClass" v-for="i in select.iconSelect" :key="i.id">
                    <span :class="i.iconClass">{{ i.iconClass }}</span>
                  </el-option>
                </el-select>
                <el-button @click="refreshIconSelect" class="el-icon-refresh"></el-button>
              </el-form-item>
              <el-form-item label="操作状态" prop="enabled">
                <el-radio-group v-model="configOpration.add.data.enabled">
                  <el-radio-button :label="s.value" v-for="s in select.statuses" :key="s.value">
                    {{ s.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="hideAddOperation">取消</el-button>
              <el-button @click="resetAddOperationForm">重置</el-button>
              <el-button type="primary" @click="addOperation">提交</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 编辑操作对话框 -->
        <div>
          <el-dialog append-to-body title="编辑操作" :visible="configOpration.edit.visible" width="30%"
            :before-close="hideEditOperation">
            <el-form :model="configOpration.edit.data" label-width="100px" size="small">
              <el-form-item label="操作名称" prop="title">
                <el-input v-model="configOpration.edit.data.title" placeholder="输入操作名称"></el-input>
              </el-form-item>
              <el-form-item label="操作标识" prop="label" required>
                <el-input v-model="configOpration.edit.data.label" placeholder="输入操作标识(字母组成)"></el-input>
              </el-form-item>
              <el-form-item label="操作描述" prop="description">
                <el-input type="textarea" v-model="configOpration.edit.data.description" placeholder="输入操作描述"></el-input>
              </el-form-item>
              <el-form-item label="操作图标" prop="iconId">
                <el-select v-model="configOpration.edit.data.iconId" placeholder="请选择操作图标" clearable filterable>
                  <el-option :value="icon.id" :label="icon.iconClass" v-for="icon in select.iconSelect" :key="icon.id">
                    <span :class="icon.iconClass">{{ icon.iconClass }}</span>
                  </el-option>
                </el-select>
                <el-button @click="refreshIconSelect" class="el-icon-refresh"></el-button>
              </el-form-item>
              <el-form-item label="操作状态" prop="enabled">
                <el-radio-group v-model="configOpration.edit.data.enabled">
                  <el-radio-button :label="s.value" v-for="s in select.statuses" :key="s.value">
                    {{ s.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="hideEditOperation">取消</el-button>
              <el-button type="primary" @click="editOperation">提交</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 关联API对话框 -->
        <div>
          <el-dialog append-to-body width="100%" :before-close="hideAllocateAPIDialog"
            :title="`${configOpration.allocateAPI.operation ? configOpration.allocateAPI.operation.title : ''} 关联的API`"
            :visible="configOpration.allocateAPI.visible">
            <div style="margin:0 10px 50px 10px;padding: 10px;box-shadow:0 0 10px #000">
              <div style="padding: 10px;">
                <el-button type="primary" plain size="small" @click="getAssociatedApisOfOperation">刷新表格</el-button>
                <el-tooltip content="" placement="right-end">
                  <span slot="content">
                    一个操作可以关联1个以上的API，此操作关联的API中，只要有一个API是禁用的，则对于普通用户，此操作最终是不可用的
                  </span>
                  <el-button type="primary" plain size="small" @click="showAllocate">去关联API</el-button>
                </el-tooltip>
              </div>
              <el-table :data="configOpration.allocateAPI.associatedApis.data" size="mini" border empty-text="暂未关联任何API">
                <!-- 动态列 -->
                <el-table-column show-overflow-tooltip :min-width="col.minWidth" :label="col.label" :prop="col.prop"
                  v-for="(col, index) in configOpration.allocateAPI.associatedApis.columns" :key="index">
                </el-table-column>
              </el-table>
            </div>
          </el-dialog>

          <el-dialog append-to-body title="关联API" :visible="configOpration.allocateAPI.allocate.visible" width="30%"
            :before-close="hideAllocate">
            <el-form :model="configOpration.allocateAPI.allocate" ref="allocateApiFormRef">
              <el-form-item label="关联的API" prop="interfaceStableIds">
                <el-select v-model="configOpration.allocateAPI.allocate.interfaceStableIds" placeholder="请选择操作关联的API"
                  filterable clearable multiple>
                  <el-option :value="s.value" :label="s.label" v-for="s in select.interfaceSelect"
                    :key="s.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <!-- 对话框底部插槽 -->
            <span slot="footer" class="dialog-footer">
              <el-button class="el-icon-refresh" @click="refreshInterfaceSelect">刷新API选项</el-button>
              <el-button @click="hideAllocate">关闭</el-button>
              <el-button @click="resetAllocateForm">重置</el-button>
              <el-button type="primary" @click="allocateAPIToOperation">提交</el-button>
            </span>
          </el-dialog>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {

  data() {
    return {
      // 下拉选项
      select: {
        // 导航状态选项
        statuses: [],
        // 导航类型选项
        navGroups: [],
        // 接口下拉选项
        interfaceSelect: [],
        // 字体图标选项
        iconSelect: [],
      },
      // 主要表格
      mainTable: {
        // 表格动态列
        columns: [
          {
            prop: 'route',
            label: '路由',
            minWidth: '60px',
          },
          {
            prop: 'title',
            label: '名称',
            minWidth: '40px',
          },
        ],
        // 展开列
        expandColumns: [
          {
            prop: 'id',
            label: 'ID',
          },
          {
            prop: 'label',
            label: '导航标签',
          },
          {
            prop: 'parentNavTitle',
            label: '父导航',
          },
          {
            prop: 'title',
            label: '名称',
          },
          {
            prop: 'description',
            label: '描述',
            minWidth: '30px',
          },
          {
            prop: 'route',
            label: '路由',
          },
          {
            prop: 'creatorName',
            label: '创建者',
          },
          {
            prop: 'createAt',
            label: '创建时间',
          },
          {
            prop: 'updaterName',
            label: '更新者',
          },
          {
            prop: 'updateAt',
            label: '更新时间',
          },
        ],
        // 表格数据
        data: [],
        // 表格选中数据
        selectedData: [],
        // 搜索数据
        search: {
          type: null,
          enabled: null,
          title: '',
          route: '',
        },
        // 分页
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
      },
      // 新增导航
      addItemDrawer: {
        visible: false,
        // 绑定数据
        data: {
          route: "",
          title: "",
          label: "",
          description: "",
          enabled: 0,
          iconId: null,
          type: 0,
        },
      },
      // 编辑导航
      editItemDrawer: {
        visible: false,
        // 绑定数据
        data: {
          id: 0,
          route: "",
          title: "",
          label: "",
          description: "",
          enabled: 0,
          iconId: null,
          type: 0,
        },
      },
      // 导航组分配导航项
      allocateItemDrawer: {
        visible: false,
        navGroup: {
          id: -1,
          title: '导航组名称',
        },
        // --------------已分配部分
        allocated: {
          columns: [
            {
              prop: 'id',
              label: 'ID',
              minWidth: '10px',
            },
            {
              prop: 'route',
              label: '路由',
              minWidth: '60px',
            },
            {
              prop: 'title',
              label: '名称',
              minWidth: '40px',
            },
            {
              prop: 'description',
              label: '描述',
              minWidth: '80px',
            },
          ],
          // 表格数据
          data: [],
          // 表格选中数据
          selectedData: [],
          // 搜索
          search: {},
          // 分页
          page: {
            currentPage: 1,
            pageSize: 10,
            total: 0,
          },
        },
        // -----------------待分配部分
        unAllocated: {
          columns: [
            {
              prop: 'id',
              label: 'ID',
              minWidth: '10px',
            },
            {
              prop: 'route',
              label: '路由',
              minWidth: '60px',
            },
            {
              prop: 'title',
              label: '名称',
              minWidth: '40px',
            },
            {
              prop: 'description',
              label: '描述',
              minWidth: '80px',
            },
          ],
          // 表格数据
          data: [],
          // 表格选中数据
          selectedData: [],
          // 搜索
          search: {},
          // 分页
          page: {
            currentPage: 1,
            pageSize: 10,
            total: 0,
          },
        },
      },
      // 导航项配置操作
      configOpration: {
        // 可见性
        visible: false,
        // 当前配置操作的导航项
        navItem: {},
        // 表格数据
        data: [],
        // 选中数据
        selectedData: [],
        // 动态列
        columns: [
          {
            prop: 'id',
            label: 'ID',
            minWidth: '20px',
          },
          {
            prop: 'title',
            label: '操作名称',
            minWidth: '100px',
          },
          {
            prop: 'label',
            label: '标识',
            minWidth: '100px',
          },
          {
            prop: 'navItemTitle',
            label: '所属导航项',
            minWidth: '100px',
          },
          {
            prop: 'description',
            label: '操作描述',
            minWidth: '100px',
          },
        ],
        // 展开列
        expandColumns: [

        ],
        // 新增部分
        add: {
          // 对话框可见性
          visible: false,
          // 表单绑定数据
          data: {
            id: 0,
            label: "",
            title: "",
            description: "",
            iconId: null,
            enabled: 0,
          },
        },
        // 编辑部分
        edit: {
          // 对话框可见性
          visible: false,
          // 表单绑定数据
          data: {
            id: 0,
            description: "",
            enabled: 0,
            iconId: null,
            label: "",
            title: "",
          },
        },
        // 给操作分配API部分
        allocateAPI: {
          // 对话框可见性
          visible: false,
          // 正在分配API的操作
          operation: null,
          // 操作关联的接口
          associatedApis: {
            // 数据
            data: [],
            // 动态列
            columns: [
              {
                prop: 'stableId',
                label: '稳定ID',
                minWidth: '60px',
              },
              {
                prop: 'description',
                label: 'API描述',
                minWidth: '100px',
              },
              {
                prop: 'requestPath',
                label: 'API请求路径',
                minWidth: '100px',
              },
              {
                prop: 'requestMethod',
                label: 'API请求方式',
                minWidth: '90px',
              },
              {
                prop: 'apiGroup',
                label: '所属组',
                minWidth: '40px',
              },
              {
                prop: 'className',
                label: '所属类',
                minWidth: '100px',
              },
            ],
          },
          // 二级对话框
          allocate: {
            // 可见性
            visible: false,
            // 分配的接口stableId集合
            interfaceStableIds: [],
          },
        },
      },
    }
  },

  computed: {
    // 借助mapGetters生成计算属性：uiAuthValidateIsNotNeeded、navgationAuths
    ...mapGetters('uiAuthModule', ['uiAuthValidateIsNotNeeded', 'navgationAuths']),
    // 各个操作可用性计算属性
  },

  methods: {
    // #region 下拉选项方法
    // 刷新状态选项
    async refreshStatuses() {
      try {
        const { data: res } = await this.$axios.get(`/admin/navigation/getAllNavEnables`)
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.select.statuses = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 刷新导航组选项
    async refreshNavGroups() {
      try {
        const { data: res } = await this.$axios.get(`/admin/navigation/getAllNavTypes`)
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.select.navGroups = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 刷新接口选项
    async refreshInterfaceSelect() {
      try {
        const { data: res } = await this.$axios.get(`/admin/operation/getInterfaceSelection`)
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.select.interfaceSelect = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 刷新字体图标选项
    async refreshIconSelect() {
      try {
        const { data: res } = await this.$axios.get(`/admin/navigation/getIconSelect`)
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.select.iconSelect = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // #endregion

    // #region 主表方法
    // 表格复选
    selectionChangeHandle(selection) {
      this.mainTable.selectedData = selection
    },
    // 批量删除
    async batchDeleteByIds() {
      const ids = this.mainTable.selectedData.map(item => item.id)
      if (ids.length === 0) {
        this.$message.info("未选择要删除的导航")
      } else {
        // -----
        try {
          await this.$confirm(`确定删除 ${ids.length} 个导航吗`)
          const { data: res } = await this.$axios({
            url: '/admin/navigation/batchDeleteByIds',
            method: 'delete',
            data: ids
          })
          if (res.code === 0) {
            this.$message.error(res.msg)
            return
          }
          let msg = ""
          res.data.forEach(delInfo => {
            msg += `<p>${delInfo.label}: ${delInfo.delCount}</P>`
          })
          this.$notify({
            title: '删除详细',
            duration: 0,
            type: 'success',
            dangerouslyUseHTMLString: true,
            message: msg
          });
          this.mainTable.page.currentPage = 1
          this.pagingGettableData()
        } catch (e) {
          if (e === 'cancel') { return }
          this.$message.error(`删除失败`)
          console.dir(e)
        }
      }
    },
    // 批量启用
    batchEnableByIds() {
      const ids = this.mainTable.selectedData.map(item => item.id)
      if (ids.length === 0) {
        this.$message.info("未选择要启用的导航")
      } else {
        this.$axios({
          url: '/admin/navigation/batchEnableNav',
          method: 'put',
          data: ids
        })
          .then((res) => {
            this.$message.success(`已启用 ${res.data.data} 个导航`)
            console.log(res)
            this.pagingGettableData()
          })
          .catch((err) => {
            this.$message.error(err.msg)
          })
      }
    },
    // 批量禁用
    batchDisableByIds() {
      const ids = this.mainTable.selectedData.map(item => item.id)
      if (ids.length === 0) {
        this.$message.info("未选择要禁用的导航")
      } else {
        this.$axios({
          url: '/admin/navigation/batchDisableNav',
          method: 'put',
          data: ids
        })
          .then((res) => {
            this.$message.success(`已禁用用 ${res.data.data} 个导航`)
            this.pagingGettableData()
          })
          .catch((err) => {
            this.$message.error(err.msg)
          })
      }
    },
    // 搜索
    toSearch() {
      this.mainTable.page.currentPage = 1
      this.pagingGettableData()
    },
    // 分页获取表格数据
    async pagingGettableData() {
      try {
        const { data: res } = await this.$axios({
          url: `/admin/navigation/pagingGetWithCondition/${this.mainTable.page.currentPage}/${this.mainTable.page.pageSize}`,
          method: 'post',
          data: this.mainTable.search
        })
        if (res.code === 0) {
          this.$message.error(res.msg)
          return
        }
        this.mainTable.data = res.data.data
        this.mainTable.page.total = res.data.total
      } catch (error) {
        console.dir(error)
      }
    },
    // 分页组件处理
    handleSizeChange(pageSize) {
      this.mainTable.page.pageSize = pageSize
      this.pagingGettableData()
    },
    handleCurrentChange(currentPage) {
      this.mainTable.page.currentPage = currentPage
      this.pagingGettableData()
    },
    // #endregion

    // #region 导航添加方法
    // 表单域重置
    resetFieldsOfAddItemForm() {
      this.$refs.addItemFormRef.resetFields()
    },
    // 显示抽屉
    showAddItemDrawer() {
      this.addItemDrawer.visible = true
    },
    // 隐藏抽屉，并刷新数据
    addItemDrawerClose(done) {
      this.addItemDrawer.visible = false
      this.pagingGettableData()
      done()
    },
    hideAddItemDrawer() {
      this.addItemDrawer.visible = false
    },
    // 添加请求
    async addItem() {
      try {
        const { data: res } = await this.$axios({
          url: '/admin/navigation/add',
          method: 'post',
          data: this.addItemDrawer.data,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已添加 ${res.data} 个导航`)
        this.$refs.addItemFormRef.resetFields()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }

    },
    // #endregion

    // #region 导航编辑方法
    // 显示抽屉
    showEditItemDrawer(navigation) {
      this.getEditDataOfNavigationById(navigation.id)
      this.editItemDrawer.visible = true
    },
    // 获取编辑用户的信息
    async getEditDataOfNavigationById(navId) {
      try {
        const { data: res } = await this.$axios.get(`/admin/navigation/${navId}`)
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.editItemDrawer.data = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 隐藏抽屉，并刷新数据
    editItemDrawerClose(done) {
      this.editItemDrawer.visible = false
      this.pagingGettableData()
      done()
    },
    hideEditItemDrawer() {
      this.editItemDrawer.visible = false
    },
    // 编辑请求
    async editItem() {
      try {
        await this.$confirm(`确定修改吗`)
        const { data: res } = await this.$axios({
          url: '/admin/navigation/updateNavigation',
          method: 'put',
          data: this.editItemDrawer.data,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        } else if (res.data === 0) {
          return this.$message.info(`修改失败`)
        }
        this.$message.success(res.msg)
        this.hideEditItemDrawer()
        this.pagingGettableData()
      } catch (e) {
        if (e === 'cancel') {
          this.editItemDrawer.visible = false
          return this.$message.info('取消修改')
        }
        this.$message.error(e.response.data.error)
      }
    },
    // #endregion

    // #region 导航组分配导航项方法
    // 显示抽屉，并初始化数据
    showAllocateItemDrawer(navGroup) {
      this.allocateItemDrawer.navGroup = navGroup
      this.selectAllocatedItemsByParentId()
      this.selectUnAllocatedItems()
      this.allocateItemDrawer.visible = true
    },
    // 隐藏抽屉,并刷新主表数据
    beforeAllocateItemDrawerClose(done) {
      this.allocateItemDrawer.visible = false
      this.pagingGettableData()
      done()
    },
    // -------------------------------------已分配部分
    // 表格数据选中变化处理
    allocatedSelectionChangeHandle(selection) {
      this.allocateItemDrawer.allocated.selectedData = selection
    },
    // 获取已分配导航项
    async selectAllocatedItemsByParentId() {
      const allocateItem = this.allocateItemDrawer
      try {
        const { data: res } = await this.$axios({
          url: `/admin/navigation/navItemsOfNavGroup/${allocateItem.navGroup.id}/${allocateItem.allocated.page.currentPage}/${allocateItem.allocated.page.pageSize}`,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        allocateItem.allocated.data = res.data.data
        allocateItem.allocated.page.total = res.data.total
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量移除已分配,并刷新未分配表格
    async batchRemoveItems() {
      const itemIds = this.allocateItemDrawer.allocated.selectedData.map(item => item.id)
      if (itemIds.length <= 0) {
        return this.$message.info(`请选择要移除的导航项`)
      }
      try {
        const { data: res } = await this.$axios.put(`/admin/navigation/batchRemoveItemsOfNavGroup`, itemIds)
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已移除 ${res.data} 个导航项`)
        this.selectAllocatedItemsByParentId()
        this.selectUnAllocatedItems()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量启用导航项
    async batchEnableItems() {
      const itemIds = this.allocateItemDrawer.allocated.selectedData.map(item => item.id)
      if (itemIds.length <= 0) {
        return this.$message.info(`请选择要启用的导航项`)
      }
      try {
        const { data: res } = await this.$axios({
          url: `/admin/navigation/batchEnableItemsOfNavGroup/${this.allocateItemDrawer.navGroup.id}`,
          method: 'put',
          data: itemIds,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已启用 ${res.data} 个导航项`)
        this.selectAllocatedItemsByParentId()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量禁用导航项目
    async batchDisableItems() {
      const itemIds = this.allocateItemDrawer.allocated.selectedData.map(item => item.id)
      if (itemIds.length <= 0) {
        return this.$message.info(`请选择要禁用的导航项`)
      }
      try {
        const { data: res } = await this.$axios({
          url: `/admin/navigation/batchDisableItemsOfNavGroup/${this.allocateItemDrawer.navGroup.id}`,
          method: 'put',
          data: itemIds,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已禁用 ${res.data} 个导航项`)
        this.selectAllocatedItemsByParentId()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 分页参数改变处理
    handleAllocatedItemSizeChange(pageSize) {
      this.allocateItemDrawer.allocated.page.pageSize = pageSize
      this.selectAllocatedItemsByParentId()
    },
    handleAllocatedItemCurrentChange(currentPage) {
      this.allocateItemDrawer.allocated.page.currentPage = currentPage
      this.selectAllocatedItemsByParentId()
    },

    // -------------------------------------待分配部分
    // 表格数据选中变化处理
    unAllocatedSelectionChangeHandle(selection) {
      this.allocateItemDrawer.unAllocated.selectedData = selection
    },
    // 获取可分配导航项
    async selectUnAllocatedItems() {
      const unAllocated = this.allocateItemDrawer.unAllocated
      try {
        const { data: res } = await this.$axios({
          url: `/admin/navigation/unAllocatedItems/${unAllocated.page.currentPage}/${unAllocated.page.pageSize}`,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        unAllocated.data = res.data.data
        unAllocated.page.total = res.data.total
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量分配导航项,并刷新已分配表格
    async batchAllocateItems() {
      const itemIds = this.allocateItemDrawer.unAllocated.selectedData.map(item => item.id)
      if (itemIds.length <= 0) {
        return this.$message.info(`请选择要分配的导航项`)
      }
      try {
        const { data: res } = await this.$axios({
          url: `/admin/navigation/batchAllocateItemsToNavGroup/${this.allocateItemDrawer.navGroup.id}`,
          method: 'put',
          data: itemIds,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已分配 ${res.data} 个导航项`)
        this.selectUnAllocatedItems()
        this.selectAllocatedItemsByParentId()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 分页参数变化处理
    handleUnAllocatedItemSizeChange(pageSize) {
      this.allocateItemDrawer.unAllocated.page.pageSize = pageSize
      this.selectUnAllocatedItems()
    },
    handleUnAllocatedItemCurrentChange(currentPage) {
      this.allocateItemDrawer.unAllocated.page.currentPage = currentPage
      this.selectUnAllocatedItems()
    },
    // #endregion

    // #region 导航项配置操作方法
    // #region --操作配置抽屉部分
    // 显示操作配置抽屉，并初始化表格、接口下拉选项
    showConfigOprationDrawer(navItem) {
      this.configOpration.navItem = navItem
      this.selectOprationsOfNavItem()
      this.refreshInterfaceSelect()
      this.configOpration.visible = true
    },
    // 隐藏抽屉
    configOprationClose() {
      this.configOpration.visible = false
      this.hideAddOperation()
      this.hideEditOperation()
    },
    // 获取导航项操作列表数据
    async selectOprationsOfNavItem() {
      try {
        const { data: res } = await this.$axios({ url: `/admin/operation/operations/${this.configOpration.navItem.id}` })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.configOpration.data = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 表格选中状态变化处理
    configOprationSelectChangeHandle(selection) {
      this.configOpration.selectedData = selection
    },
    // 批量删除操作
    async batchDeleteOprations() {
      const ids = this.configOpration.selectedData.map(item => item.id)
      if (ids.length <= 0) {
        return this.$message.info(`请选择要删除导航的哪些操作`)
      }
      try {
        const { data: res } = await this.$axios({ url: '/admin/operation/batchDeleteById', method: 'delete', data: ids })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已删除导航的 ${res.data} 个操作`)
        this.selectOprationsOfNavItem()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量启用操作
    async batchEnableOprations() {
      const ids = this.configOpration.selectedData.map(item => item.id)
      if (ids.length <= 0) {
        return this.$message.info(`请选择要启用导航的哪些操作`)
      }
      try {
        const { data: res } = await this.$axios({ url: '/admin/operation/batchEnableById', method: 'put', data: ids })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已启用导航的 ${res.data} 个操作`)
        this.selectOprationsOfNavItem()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量禁用操作
    async batchDisableOprations() {
      const ids = this.configOpration.selectedData.map(item => item.id)
      if (ids.length <= 0) {
        return this.$message.info(`请选择要禁用导航的哪些操作`)
      }
      try {
        const { data: res } = await this.$axios({ url: '/admin/operation/batchDisableById', method: 'put', data: ids })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已禁用导航的 ${res.data} 个操作`)
        this.selectOprationsOfNavItem()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // #endregion

    // #region --新增操作对话框部分
    // 显示新增操作界面
    showAddOperation() {
      this.configOpration.add.visible = true
    },
    // 隐藏新增操作界面
    hideAddOperation() {
      this.configOpration.add.visible = false
    },
    // 重置新增操作表单
    resetAddOperationForm() {
      this.$refs.add_operation_form.resetFields()
    },
    // 新增操作请求
    async addOperation() {
      try {
        const { data: res } = await this.$axios({
          url: `/admin/operation/addOprationOfNavItem/${this.configOpration.navItem.id}`,
          method: 'post',
          data: this.configOpration.add.data,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已添加 ${res.data} 个操作`)
        this.selectOprationsOfNavItem()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // #endregion

    // #region --编辑操作对话框部分
    // 显示编辑操作界面,回显要编辑的操作
    showEditOperation(operation) {
      this.configOpration.edit.visible = true
      this.selectOperation(operation)
    },
    // 获取某一操作
    async selectOperation(operation) {
      try {
        const { data: res } = await this.$axios({ url: `/admin/operation/operation/${operation.id}` })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.configOpration.edit.data = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 隐藏编辑操作界面
    hideEditOperation() {
      this.configOpration.edit.visible = false
    },
    // 编辑操作请求
    async editOperation() {
      try {
        const { data: res } = await this.$axios({
          url: '/admin/operation/editById',
          method: 'put',
          data: this.configOpration.edit.data
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(res.msg)
        this.selectOprationsOfNavItem()
        this.hideEditOperation()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // #endregion

    // #region --操作关联API对话框方法开始
    // 展示一级对话框
    showAllocateAPIDialog(operation) {
      this.configOpration.allocateAPI.operation = operation
      this.configOpration.allocateAPI.visible = true
      this.getAssociatedApisOfOperation()
    },
    // 隐藏一级对话框
    hideAllocateAPIDialog() {
      this.configOpration.allocateAPI.visible = false
    },
    // 获取操作关联的API
    async getAssociatedApisOfOperation() {
      const op = this.configOpration.allocateAPI.operation
      const { data: res } = await this.$axios.get(`/admin/operation/associatedApisOfOperation/${op.id}`)
      if (res.code === 0) {
        return this.$message.error(res.msg)
      }
      this.configOpration.allocateAPI.associatedApis.data = res.data
    },
    // 展示二级对话框
    showAllocate() {
      this.configOpration.allocateAPI.allocate.visible = true
    },
    // 隐藏二级对话框
    hideAllocate() {
      this.configOpration.allocateAPI.allocate.visible = false
    },
    // 重置二级对话框表单
    resetAllocateForm() {
      this.$refs.allocateApiFormRef.resetFields()
    },
    // 发送分配API请求
    async allocateAPIToOperation() {
      const allocateAPI = this.configOpration.allocateAPI
      try {
        const { data: res } = await this.$axios({
          url: `/admin/operation/allocateApisToOperation/${allocateAPI.operation.id}`,
          method: 'post',
          data: allocateAPI.allocate.interfaceStableIds
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`当前操作共关联 ${res.data} 条接口`)
        this.resetAllocateForm()
        this.getAssociatedApisOfOperation()
        this.hideAllocate()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // #endregion 操作关联API对话框方法结束

    // #endregion 导航项配置操作方法结束

  },

  mounted() {
    this.pagingGettableData()

    this.refreshStatuses()
    this.refreshNavGroups()
    this.refreshIconSelect()
  }
}
</script>

<style lang="less" scoped>
.main_table_area {
  .op_btns {
    display: flex;
    justify-content: start;
    padding-bottom: 10px;
  }

  .search_area {
    display: flex;
    justify-content: start;
    padding-bottom: 10px;

    .search_item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 20px;

      .el-select {
        max-width: 140px;
      }

      .el-input {
        max-width: 150px;
        padding-right: 5px;
      }
    }
  }
}

.add_nav_area {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;

  #add_form {
    width: 350px;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 3px #000;
  }
}

.edit_nav_area {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;

  #edit_form {
    width: 400px;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 3px #000;
  }
}

#allocated_area,
#un_allocated_area {
  padding: 0 10px 10px 10px;
}

.allocate_item_area {
  .anchor_point {
    text-decoration: none;
    color: #66b1ff;
    background-color: rgb(236, 245, 255);
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 20px;
    margin-left: 40px;
    font-size: 12px;
    border: 1px solid #66b1ff;
    border-radius: 2px;
  }

  .anchor_point:hover {
    color: aliceblue;
    background-color: #66b1ff;
  }
}

// .iconfont {
//   font-size: 12px;
// }
</style>